$('.dropBtn + ul').on('click', function () {
  $(this).siblings().children('.dropTitle').text(event.target.innerText)
})

var data = [
  {
    id: 1,
    name: '轻型步战车维修手册1',
    regulationsType: '专业一部',
    professionalCategory: '维修制度',
    equipmentModel: 'A01轻型步战车'
  },
  {
    id: 2,
    name: '轻型步战车维修手册2',
    regulationsType: '专业一部',
    professionalCategory: '维修制度',
    equipmentModel: 'A01轻型步战车'
  },
  {
    id: 3,
    name: '轻型步战车维修手册3',
    regulationsType: '专业一部',
    professionalCategory: '维修制度',
    equipmentModel: 'A01轻型步战车'
  },
  {
    id: 4,
    name: '轻型步战车维修手册4',
    regulationsType: '专业一部',
    professionalCategory: '维修制度',
    equipmentModel: 'A01轻型步战车'
  },
  {
    id: 5,
    name: '轻型步战车维修手册5',
    regulationsType: '专业二部',
    professionalCategory: '维修制度',
    equipmentModel: 'A01轻型步战车'
  },
  {
    id: 6,
    name: '轻型步战车维修手册5',
    regulationsType: '专业二部',
    professionalCategory: '维修制度',
    equipmentModel: 'A01轻型步战车'
  },
  {
    id: 7,
    name: '轻型步战车维修手册7',
    regulationsType: '专业二部',
    professionalCategory: '使用制度',
    equipmentModel: 'A01轻型步战车'
  },
  {
    id: 8,
    name: '轻型步战车维修手册8',
    regulationsType: '专业二部',
    professionalCategory: '使用制度',
    equipmentModel: 'A01轻型步战车'
  },
  {
    id: 9,
    name: '轻型步战车维修手册9',
    regulationsType: '专业三部',
    professionalCategory: '使用制度',
    equipmentModel: 'A01轻型步战车'
  },
  {
    id: 10,
    name: '轻型步战车维修手册10',
    regulationsType: '专业三部',
    professionalCategory: '使用制度',
    equipmentModel: 'A01轻型步战车'
  },
  {
    id: 11,
    name: '轻型步战车维修手册10',
    regulationsType: '专业三部',
    professionalCategory: '使用制度',
    equipmentModel: 'A01轻型步战车'
  }
]

var currentPage = 1
var pageNum = Math.ceil(data.length / 10)
var tbody = document.querySelector('tbody')
var pagination = document.querySelector('.pagination')
var paginationRight = document.querySelector('#paginationRight')
function render() {
  var searchData = []
  var renderData = []
  tbody.innerHTML = ''
  //筛选数据
  //关键词
  var searchName = document.querySelector('.searchName').value
  searchData = data
  if (searchName.trim()) {
    searchData = data.filter(function (v) {
      return v.name.includes(searchName)
    })
  }
  //法规类型
  var title = $('.dropTitle').text()
  if (title.substring(0, 4) != '法规类型') {
    searchData = searchData.filter(function (v) {
      return v.regulationsType == title.substring(0, 4)
    })
  }
  //专业类别
  if (title.substring(4) != '专业类别') {
    searchData = searchData.filter(function (v) {
      return v.professionalCategory == title.substring(4)
    })
  }
  pageNum = Math.ceil(searchData.length / 10)
  //渲染数据
  renderData = searchData.slice((currentPage - 1) * 10, currentPage * 10)
  for (var i = 0; i < renderData.length; i++) {
    var tr = document.createElement('tr')
    tr.innerHTML = `
      <td>${renderData[i].id}</td>
      <td>${renderData[i].name}</td>
      <td>${renderData[i].regulationsType}</td>
      <td>${renderData[i].professionalCategory}</td>
      <td>${renderData[i].equipmentModel}</td>
      <td>
        <button class="btn btn-primary viewBtn">查看</button>
        <button class="btn btn-info downloadBtn">下载
        </button>
      </td>
          `
    tbody.appendChild(tr)
  }
  //渲染分页器
  var pageBtn = document.querySelectorAll('.pageBtn')
  if (pageBtn.length) {
    for (var i = 0; i < pageBtn.length; i++) {
      pagination.removeChild(pageBtn[i].parentNode)
    }
  }

  for (var i = 1; i <= pageNum; i++) {
    var li = document.createElement('li')
    li.innerHTML = `<a href="#" class="pageBtn">${i}</a>`
    pagination.insertBefore(li, paginationRight)
  }
  //当前页active
  document
    .querySelectorAll('.pageBtn')
    [currentPage - 1].parentNode.classList.add('active')
  //禁止左右按钮
  $('#paginationLeft').removeClass('disabled')
  $('#paginationRight').removeClass('disabled')
  if (currentPage == 1) {
    $('#paginationLeft').addClass('disabled')
  }
  if (currentPage == pageNum) {
    $('#paginationRight').addClass('disabled')
  }
}
render()
//改变页码
function changePage(e) {
  if (e.target.innerText == '«') {
    if (currentPage > 1) {
      currentPage--
      render()
    }
  } else if (e.target.innerText == '»') {
    if (currentPage < pageNum) {
      currentPage++
      render()
    }
  } else {
    currentPage = e.target.innerText
    render()
  }
}
pagination.addEventListener('click', changePage)
var searchBtn = document.querySelector('.searchBtn')
searchBtn.addEventListener('click', function () {
  currentPage = 1
  render()
})
//添加
var addId = data.length + 1
function add() {
  $('#addModal').modal('show')
  $('#addName').val('')
  $('#addEquipmentModel').val('')
  $('#addRegulationsType').val('')
  $('#addProfessionalCategory').val('')
}
$('#addBtn').on('click', add)
//添加保存
function addSave() {
  data.push({
    id: addId,
    name: $('#addName').val(),
    equipmentModel: $('#addEquipmentModel').val(),
    regulationsType: $('#addRegulationsType').val(),
    professionalCategory: $('#addProfessionalCategory').val()
  })
  $('#addModal').modal('hide')
  render()
  addId++
}
$('#addSave').on('click', addSave)
//查看
function view() {
  $('#viewModal').modal('show')
  for (var i = 0; i < data.length; i++) {
    if (
      event.target.parentNode.parentNode.children[0].innerText == data[i].id
    ) {
      console.log(1)
      $('.viewTitle').text(data[i].name)
      $('.viewEquipmentModel').text(data[i].equipmentModel)
    }
  }
}
$('.viewBtn').on('click', view)
